<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Meshes</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body>
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <header>
      <label for="meshSlider">Color</label>
      <input
        type="range"
        min="0"
        max="255"
        value="128"
        class="slider"
        id="meshSlider"
      />
      <button id="reverseBtn">Reverse Faces</button>
      <label for="alphaSelect">Alpha</label>
      <select id="alphaSelect">
        <option>Transparent</option>
        <option>Translucent</option>
        <option selected>Opaque</option>
      </select>&nbsp;
      <label for="crossCheck">Crosshairs</label>
      <input type="checkbox" id="crossCheck" checked />
      <p>
      <label id="meshBtns">Meshes: </label>
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <label id="shaderBtns">Shaders: </label>
    </footer>
  </body>
</html>
<script type="module" async>
  import * as niivue from "../dist/index.js"
  meshSlider.oninput = function () {
    const midx = nv1.meshes.length - 1
    nv1.setMeshProperty(nv1.meshes[midx].id, "rgba255", [
      this.value,
      164,
      164,
      255,
    ])
  }
  alphaSelect.onchange = function () {
    const index = this.selectedIndex
    const midx = nv1.meshes.length - 1
    nv1.meshes[midx].visible = index > 0
    if (index === 1) {
      nv1.meshes[midx].opacity = 0.2
    } else if (index === 2) {
      nv1.meshes[midx].opacity = 1
    } else {
      nv1.meshes[midx].opacity = 0
    }
    nv1.drawScene()
  }
  crossCheck.onchange = function () {
    nv1.opts.show3Dcrosshair = this.checked
    nv1.drawScene()
  }
  reverseBtn.onclick = function () {
    nv1.reverseFaces(nv1.meshes[0].id)
    nv1.reverseFaces(nv1.meshes[1].id)
  }
  var nv1 = new niivue.Niivue({
    show3Dcrosshair: true,
    backColor: [0.9, 0.9, 1, 1],
  })
  nv1.setSliceType(nv1.sliceTypeRender)
  await nv1.attachTo("gl1")
  nv1.opts.showLegend = false
  await nv1.loadMeshes([
    { url: "../images/CIT168.mz3", rgba255: [0, 0, 255, 255] },
    {
      url: "../images/BrainMesh_ICBM152.lh.mz3",
      rgba255: [222, 164, 164, 255],
    },
  ])
  nv1.setMeshShader(nv1.meshes[1].id, "Outline")
  nv1.setClipPlane([-0.1, 270, 0])
  let shaders = nv1.meshShaderNames()
  for (let i = 0; i < shaders.length; i++) {
    let btn = document.createElement("button")
    btn.innerHTML = shaders[i]
    let clickTimer = null
    const clickDelay = 250 // ms — adjust to taste
    btn.addEventListener('click', function (event) {
      if (clickTimer) return // second click waiting for dblclick
      clickTimer = setTimeout(() => {
        // Execute single-click behavior only if no dblclick occurs
        const midx = nv1.meshes.length - 1
        nv1.setMeshShader(nv1.meshes[midx].id, shaders[i])
        clickTimer = null
      }, clickDelay)
    })
    btn.addEventListener('dblclick', function () {
      clearTimeout(clickTimer) // prevent single-click behavior
      clickTimer = null
      // Execute double-click behavior
      nv1.setMeshShader(nv1.meshes[0].id, shaders[i])
    })
    shaderBtns.appendChild(btn)
  }
  let meshes = ['aal.mz3', 'ColumnMajorOrder.gii', 'mni_format.obj.gz', 'simplify_brain.obj', 'lh.pial', 'sub-test02_left_hemisphere.srf.gz', 'tract.SLF1_R.tck','colby.trk', 'colby.trx', 'TR_S_R.tt.gz', 'tract.FAT_R.vtk', 'water-color.wrl', 'MolView-sticks-color_38.x3d']
  for (let i = 0; i < meshes.length; i++) {
    let btn = document.createElement("button")
    btn.innerHTML = meshes[i]
    btn.onclick = async function () {
      let mesh = "../images/" + meshes[i]
      const volumeObj = { url: mesh }
      await nv1.loadMeshes([ volumeObj ])
      nv1.setMeshProperty(nv1.meshes[0].id, "fiberRadius", 0.5)
    }
    meshBtns.appendChild(btn)
  }
</script>
